I am working on a react app where I am rendering components inside table row fields.Here's my table structure:

 render() {
  console.log(this.codeDataGetter);
  const widthOfEachGrid = this.props.width / 16;
  const columns = (
    [<Column
      key={1}
      label='SR.No'
      width={widthOfEachGrid * 2}
      cellDataGetter={this.srNoDataGetter}
    />,
      <Column
        key={2}
        label='Entity Name'
        dataKey='entity_name'
        width={widthOfEachGrid * 2}
        cellDataGetter={defaultCellDataGetter}
      />,
      <Column
        key={3}
        label='Code'
        dataKey='code'
        width={widthOfEachGrid * 1}
        cellDataGetter={this.codeDataGetter}
      />,
      <Column
        key={4}
        label='Code Description'
        dataKey='code_description'
        width={widthOfEachGrid * 2}
        cellDataGetter={this.codeDescriptionDataGetter}
      />,


    ]
  );

  return (
    <StyledTable
      height={this.props.height}
      width={this.props.width}
      headerHeight={headerHeight}
      rowHeight={rowHeight}
      rowRenderer={this.rowRenderer}
      rowCount={this.props.codeSets.length}
      rowGetter={({ index }) => this.props.codeSets[index]}
      LoadingRow={this.props.LoadingRow}
      overscanRowCount={5}
      tabIndex={-1}
      className='ui very basic small single line striped table'
      columnsList={columns}
    />
  );
}

}

Now in each of the column in columns list,I have defined a different cellRenderer and the cellRenderer which are returning String are working but when I return a component it renders this:

[Object Object]

instead of a component.

Here's my cellRenderers:

 srNoDataGetter = ({
      dataKey,
      rowData,
    }) => (
      this.props.codeSets.findIndex(codeSet => codeSet.id === rowData.id) + 1
    )


 codeDescriptionDataGetter = ({
      dataKey,
      rowData,
    }) => {
      let dataToReturn = '';
      if (rowData) {
        if (typeof rowData.get === 'function') {
          dataToReturn = rowData.get(dataKey);
        }
        dataToReturn = rowData[dataKey];
      } else dataToReturn = '';
      return (
        <div>
          <Input
            type='text'
            className='form-control'
            value={dataToReturn}
            placeholder={translateText('Code Description')}
            onChange={() => this.handleCodeDescriptionChange(event, index)}
            style={{ height: '70%' }}
          />
        </div>
      );
    }

The srNoDataGetter works fine as it returns a string and renders in the table perfectly but the codeDescriptionDataGetter instead of rendering a Input Field just prints [Object Object].

Any leads on this?